<template>
  <el-menu
    mode="vertical"
    :collapse="false"
    active-text-color="orange"
    default-active="2"
    text-color="white"
    background-color="rgb(42,42,51)"
    class="down"
  >
    <el-menu-item index="0">
      <el-icon><House /></el-icon>
      <span>主页（后台首页）</span>
    </el-menu-item>

    <el-sub-menu index="1">
      <template #title>
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="1-1" @click="r">用户列表</el-menu-item>
    </el-sub-menu>
    
    <el-sub-menu index="2">
      <template #title>
        <el-icon><ShoppingTrolley /></el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item index="2-1" >商品分类管理</el-menu-item>
      <el-menu-item index="2-2" @click="listpor">商品列表</el-menu-item>
      <el-menu-item index="2-3" @click="CarouselManagement">轮播图管理</el-menu-item>
      <el-menu-item index="2-4" @click="OrderManagement">订单管理</el-menu-item>
    </el-sub-menu>
    
    <el-menu-item index="3">
      <el-icon><Coin /></el-icon>
      <span>营收管理</span>
    </el-menu-item>
    
    <el-menu-item index="4">
      <el-icon><FolderOpened /></el-icon>
      <span>文件管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { House,User,ShoppingTrolley,Coin,FolderOpened } from "@element-plus/icons-vue";

const router = useRouter();

const r = () => {
  router.push('/admin/index/person');
}
const listpor=()=>{
  router.push('/admin/index/listpor')
}
const CarouselManagement=()=>{
  router.push('/admin/index/CarouselManagement')
}
const OrderManagement=()=>{
  router.push('/admin/index/OrderManagement')
}
</script>

<style scoped>
.down {
  width: 180px;
  height: 100%;
  border: 0;
}

.el-menu-item, .el-sub-menu {
  transition: background-color 0.3s;
}

.el-menu-item:hover, .el-sub-menu:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
</style>